<template>
	<view>
		<view class="p-4 flex flex-column grid-gap-4">
			<view class="p-4 rounded-4 bg-white flex flex-column grid-gap-4">
				<view class="flex flex-y-center grid-gap-2">
					<text class="bg-primary-light-3 rounded-4" style="height: 8px;width: 8px;"></text>
					<text class="h9 font-weight-600">预约项目</text>
				</view>
				<view class="flex flex-column grid-gap-4 bg">
					<view class="flex grid-gap-2 bg-white py-2" v-for="(item, index) in info.projects" :key="index">
						<image :src="item.thumb" mode="scaleToFill"
							style="width: 154rpx;height: 154rpx;border-radius: 16rpx;"></image>
						<view class="flex-1 flex flex-column grid-gap-2">
							<text class="h8 font-weight-500">{{ item.service_title }}</text>
							<text class="h10 text-placeholder" v-if="item.tips">{{ item.tips }}</text>
							<view class="flex grid-gap-2">
								<view
									class="flex flex-center grid-gap-1 rounded-2 border border-primary pl-1 pr-2 py-1">
									<image src="/static/icons/timer.png" mode="scaleToFill"
										style="width: 14px;height: 14px;" />
									<text class="text-primary h10">{{ item.duration }}分钟</text>
								</view>
							</view>
							<view class="flex flex-center">
								<view class="flex flex-column grid-gap-1">
									<x-money type="danger-light-3" weight="bold" size="8" :money="item.price" unit="">
										<template #prefix>
											<text class="h10 text-danger-light-3">￥</text>
										</template>
									</x-money>
								</view>
								<view class="flex-1"></view>
								<view @tap.stop class="flex flex-center grid-gap-1">
									<text class="text-placeholder">x</text>
									<text class="font-weight-600 text-grey" v-if="item.num > 0">{{ item.num }}</text>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="flex flex-center p-2 grid-gap-2" @tap="showDetail = !showDetail">
				<text class="text-placeholder h10" v-if="showDetail">收起订单详情</text>
				<text class="text-placeholder h10" v-else>展开订单详情</text>
				<uni-icons :type="showDetail ? 'up' : 'down'" size="12" color="var(--xl-placeholder)"></uni-icons>
			</view>
			<view class="flex flex-column grid-gap-4" v-show="showDetail">
				<!-- 订单明细 -->
				<view class="p-4 rounded-4 bg-white flex flex-column grid-gap-4">
					<view class="flex flex-y-center grid-gap-2">
						<text class="bg-primary-light-3 rounded-4" style="height: 8px;width: 8px;"></text>
						<text class="h9 font-weight-600">订单明细</text>
					</view>
					<view class="flex flex-y-center flex-x-space-between">
						<text class="text-grey h9">项目金额</text>
						<x-money type="danger-light-3" weight="bold" size="8" :money="info.basic_price">
							<template #prefix>
								<text class="h10 text-danger-light-3">￥</text>
							</template>
						</x-money>
					</view>
					<view class="flex flex-y-center flex-x-space-between">
						<text class="text-grey h9">延长金额</text>
						<x-money type="danger-light-3" weight="bold" size="8" :money="info.overtime_price">
							<template #prefix>
								<text class="h10 text-danger-light-3">￥</text>
							</template>
						</x-money>
					</view>
					<view class="flex flex-y-center flex-x-space-between" v-if="info.travel_price">
						<text class="text-grey h9">出行费用</text>
						<x-money type="danger-light-3" weight="bold" size="8" :money="info.travel_price">
							<template #prefix>
								<text class="h10 text-danger-light-3">￥</text>
							</template>
						</x-money>
					</view>
					<view class="flex flex-y-center flex-x-space-between" v-if="info.travel_name">
						<text class="text-grey h9">车费详情</text>
						<view class="flex flex-center grid-gap-1">
							<text class="h10 text-dark font-weight-600">{{ info.travel_name }}</text>
							<text class="h10 text-dark-light-3">全程{{ info.distance_text }}</text>
						</view>
					</view>
					<view class="flex flex-y-center flex-x-space-between" v-if="info.travel_name">
						<text class="text-grey h9">支付方式</text>
						<view class="flex flex-center grid-gap-1" v-if="info.pay_type === 'money'">
							<image src="@/static/icons/pay/balance.png" mode="scaleToFill"
								style="width: 20px;height: 20px;" />
							<text class="h10">余额支付</text>
						</view>
						<view class="flex flex-center grid-gap-1" v-else-if="info.pay_type === 'wxpay'">
							<image src="@/static/icons/pay/wxpay.png" mode="scaleToFill"
								style="width: 20px;height: 20px;" />
							<text class="h10">微信支付</text>
						</view>
						<view class="flex flex-center grid-gap-1" v-else-if="info.pay_type === 'alipay'">
							<image src="@/static/icons/pay/alipay.png" mode="scaleToFill"
								style="width: 20px;height: 20px;" />
							<text class="h10">支付宝</text>
						</view>
						<view class="flex flex-center grid-gap-1" v-else-if="info.pay_type === 'epay'">
							<image src="@/static/icons/pay/epay.png" mode="scaleToFill"
								style="width: 20px;height: 20px;" />
							<text class="h10">易支付</text>
						</view>
					</view>
					<view class="flex flex-y-center flex-x-space-between" v-if="info.coupon_money > 0">
						<text class="text-grey h9">优惠金额</text>
						<x-money type="danger-light-3" weight="bold" size="8" :money="info.coupon_money">
							<template #prefix>
								<text class="h10 text-danger-light-3">￥</text>
							</template>
						</x-money>
					</view>
					<view class="flex flex-y-center flex-x-space-between">
						<text class="text-grey h9">支付金额</text>
						<x-money type="danger-light-3" weight="bold" size="8" :money="info.price">
							<template #prefix>
								<text class="h10 text-danger-light-3">￥</text>
							</template>
						</x-money>
					</view>
				</view>

				<!-- 订单详情 -->
				<view class="p-4 rounded-4 bg-white flex flex-column grid-gap-4">
					<view class="flex flex-y-center grid-gap-2">
						<text class="bg-primary-light-3 rounded-4" style="height: 8px;width: 8px;"></text>
						<text class="h9 font-weight-600">订单信息</text>
					</view>

					<view class="flex flex-y-center flex-x-space-between">
						<text class="h9 text-grey">客户</text>
						<view class="flex flex-center grid-gap-1">
							<image :src="info.headimg" mode="scaleToFill" class="rounded-circle"
								style="width: 20px;height: 20px;" />
							<text class="h10">{{ info.nickname }}</text>
						</view>
					</view>
					<view class="flex flex-y-center flex-x-space-between">
						<text class="text-grey h9">订单编号</text>
						<text class="h10 text-dark font-weight-600" hover-class="bg" selectable user-select>{{
							info.trade
							}}</text>
					</view>
					<view class="flex flex-y-center flex-x-space-between">
						<text class="text-grey h9">预约时间</text>
						<text class="h10 text-dark font-weight-600" hover-class="bg" selectable user-select>{{
							info.start_time }}</text>
					</view>
					<view class="flex flex-y-center flex-x-space-between">
						<text class="text-grey h9">订单备注</text>
						<text class="h10 text-dark font-weight-600">{{ info.remark }}</text>
					</view>
				</view>
				<view class="flex flex-center p-2 grid-gap-2" @tap="showDetail = !showDetail">
					<text class="text-placeholder h10" v-if="showDetail">收起订单详情</text>
					<text class="text-placeholder h10" v-else>展开订单详情</text>
					<uni-icons :type="showDetail ? 'up' : 'down'" size="12" color="var(--xl-placeholder)"></uni-icons>
				</view>
			</view>
			<view class="flex flex-column bg-white rounded-4">
				<view class="flex flex-y-center p-4 grid-gap-2">
					<text class="bg-warning-light-3 rounded-4" style="height: 8px;width: 8px;"></text>
					<text class="h9 font-weight-600">转单须知</text>
				</view>
				<view class="bg flex flex-column grid-gap-1">
					<view class="bg-white flex flex-center p-4 grid-gap-4">
						<image src="@/static/icons/no_go.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="flex-1 flex flex-column grid-gap-1">
							<text class="h9 font-weight-600">{{WebConfigStore.replaceIndustryPersonnelName('技师未出发')}}</text>
							<text class="text-placeholder h9">与用户协商后可无责转单</text>
						</view>
					</view>
					<view class="bg-white flex flex-center p-4 grid-gap-4">
						<image src="@/static/icons/order_go.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="flex-1 flex flex-column grid-gap-1">
							<text class="h9 font-weight-600">{{WebConfigStore.replaceIndustryPersonnelName('技师已出发')}}</text>
							<text class="text-placeholder h9">从技师账户中扣除已到账的去程路费</text>
						</view>
					</view>
					<view class="bg-white flex flex-center p-4 grid-gap-4">
						<image src="@/static/icons/order_arrive.png" style="width: 40rpx;height: 40rpx;"></image>
						<view class="flex-1 flex flex-column grid-gap-1">
							<text class="h9 font-weight-600">{{WebConfigStore.replaceIndustryPersonnelName('技师已到达')}}</text>
							<text class="text-placeholder h9">从技师账户中扣除往返路费</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 转单原因 -->
			<view class="p-4 rounded-4 bg-white flex flex-column grid-gap-4">
				<view class="flex flex-y-center grid-gap-2">
					<text class="bg-primary-light-3 rounded-4" style="height: 8px;width: 8px;"></text>
					<text class="h9 font-weight-600">转单原因</text>
				</view>
				<textarea maxlength="255" placeholder="在此输入转单原因" v-model="form.transferring_message" class="w-100"></textarea>
			</view>
		</view>
		<view class="footer pb-safe-area">
			<view class="flex p-4">
				<button class="flex-1 btn-primary btn-round" @tap="submit()">确认提交</button>
			</view>
		</view>
		<x-loading v-if="loading" />
	</view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { $page, $api, $message } from '@/utils';
import { onLoad } from '@dcloudio/uni-app';
import { $EventName } from '@/utils/const/env';
import {  useWebConfigStore } from "@/stores";
const WebConfigStore = useWebConfigStore();
const form = reactive({
	trade: '',
	use_role:'technician',
	transferring_message: ''
});
const info = ref({});
const loading = ref(false);
const showDetail = ref(false);
const getOrderInfo = (trade: any) => {
	loading.value = true;
	$api.Orders.info({
		trade,
		action:'technician'
	}).then((data: any) => {
		info.value = data;
		form.trade = data.trade;
	}).catch((err: any) => {
		uni.showModal({
			title: '提示',
			content: err.msg,
			showCancel: false,
			success: () => {
				$page.back();
			}
		})
	}).finally(() => {
		loading.value = false;
	})
}
const submit = () => {
	if (!form.transferring_message) {
		return $message.error('请输入转单原因');
	}
	loading.value = true;
	$api.Orders.transferring(form).then((res: any) => {
		uni.$emit($EventName.UPDATE_ORDER);
		uni.showModal({
			title: '提示',
			content: res.msg,
			showCancel: false,
			success: () => {
				$page.back();
			}
		})
	}).catch((err: any) => {
		$message.error(err.msg);
	}).finally(() => {
		loading.value = false;
	})
}
onLoad((options: any) => {
	getOrderInfo(options.trade);
})
</script>
<style lang="scss" scoped>
.footer {
	position: sticky;
	bottom: 0;
	background-color: $uni-bg-color-grey;
	z-index: 100;
}
</style>